<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
            background-image: url(img/1.jpg);
        }

        .login-wrapper {
            background-color: dimgray;
            width: 250px;
            height: 412px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,25%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input_txt {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .input_txt::placeholder {
            text-transform: uppercase;
        }
        .input_pass {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .input_pass::placeholder {
            text-transform: uppercase;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        .niceButton4{
            background-color: skyblue;
            border: none;
            border-radius: 12px;
            color:white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            transition-duration: 0.4s;
            -webkit-transition-duration: 0.4s;
        }
        .input_sub:hover{
            box-shadow: 0 12px 16px 0 rgba(0,0,0,.24),
            0 17px 50px 0 rgba(0,0,0,.19);

        }

    </style>
</head>

<body>

<div class="container">
    <div class="login-wrapper">
        <div class="header">Login</div>
        <div class="form-wrapper">
            <input type="text" class="input_txt" placeholder="账号">
            <input type="password" class="input_pass" placeholder="密码">
        </div>
        <div class="msg">
            <input type="submit" id="s1" class="input_sub" value="登录"  style="background-color: #1C1C1C;color:#fff;border: none;width: 50%;height: 40px;">
        </div>
    </div>
</div>

<script type="text/javascript" >
    let input_txt=document.querySelector('.input_txt')
    let input_pass=document.querySelector('.input_pass')
    let input_sub=document.querySelector('.input_sub')
    input_sub.onclick=function (){

        let username=input_txt.value
        let password=input_pass.value
        if(username == "admin" && password == '123456'||username == "user" && password == '654321'){
            alert('登录成功')
            window.location.href='enter.html'
        }else {alert('登录失败')}
    }
    input_txt.value=localStorage.getItem('usename')
    input_pass.value=localStorage.getItem('password')
</script>
</body>
</html>


